import React from 'react'

const Options = ({list,showActive,showCompleted}) => {
    const isShowOptions = () => {
        let num = 0;
        list.forEach(item => {
            if(item.done === true) {
                num += 1;
            }
        });

        if(num > 0) {
            return true;
        }else{
            return false;
        }
    }
    const itemsLeft = () => {
        let num = 0;
        list.forEach(item => {
            if(item.done === false) {
                num += 1;
            }
        });
        return num;
    }
    return (
        <div>
            {
                itemsLeft() === 0? <span></span>
                :<p>{itemsLeft()} item left</p>
            }
            <div>
                {
                    isShowOptions() ? <div>
                        <span>All</span>
                        <span>Active</span>
                        <span>Completed</span>
                        <span>Clear completed</span>
                    </div>
                    :<span>All</span>
                }
            </div>
        </div>
    )
}

export default Options;